<template>
  <div class="editor-info">
    <div class="input-box">
      <div class="item">
        <p>真实姓名：</p>
        <input
          type="text"
          placeholder="请输入真实姓名"
          v-model="address.truename"
        >
        <i class="icon iconfont"></i>
      </div>
      <!-- <div class="item">
        <p>手机号：</p>
        <input
          type="text"
          placeholder="请输入真实手机号码"
          v-model="address.truename"
        >
        <i class="icon iconfont icon-xiangyou"></i>
      </div> -->
      <div
        class="item"
        @click="selectaAddress"
      >
        <p>地区：</p>
        <input
          type="text"
          placeholder="选择省 / 市 / 区"
          v-model="comaddress"
        >
        <i class="icon iconfont icon-xiangyou"></i>
      </div>
      <div class="item">
        <p>详细地址：</p>
        <input
          type="text"
          placeholder="请输入详细地址"
          v-model="address.address"
        >
        <i class="icon iconfont"></i>
      </div>
    </div>
    <div class="tips danger">
      *资料一旦提交将无法修改，请谨慎提交
    </div>
    <div class='submit'>
      <input
        type="submit"
        value="保存"
        @click="submit"
      >
    </div>
    <van-popup
      v-model="iseditor"
      position='bottom'
    >
      <van-area
        :area-list="areaList"
        title='请选择地区'
        @confirm='confirm'
        @cancel='cancel'
        @change='change'
      />
    </van-popup>
    <!-- <van-address-edit
      :area-list="areaList"
      @save="onSave"
      @change-detail="onChangeDetail"
    /> -->
  </div>
</template>
<script>
import province_list from "../../assets/js/address";
import { personalData, personalUpdate } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      areaList: province_list,
      isback: true,
      title: "个人资料",
      iconnameright: "",
      backgroundColor: "#f44",
      iconnameleft: "icon-icon-",
      iseditor: false,
      address: {
        truename: "",
        address: "",
        province: "",
        town: "",
        district: "",
        province_id: ""
      },
      resdata: {},
      disabile: false
    };
  },
  computed: {
    comaddress() {
      return this.address.province + this.address.town + this.address.district || '';
    }
  },
  methods: {
    getData() {
      personalData().then(res => {
        this.address = JSON.parse(JSON.stringify(res.data));
        this.resdata = JSON.parse(JSON.stringify(res.data));
        if (this.address.province) {
          this.disabile = true;
        }
      });
    },
    confirm() {
      this.iseditor = false;
    },
    cancel() {
      this.iseditor = false;
    },
    change(Picker) {
      const address = Picker.getValues();
      this.address.province = address[0].name;
      this.address.town = address[1].name;
      this.address.district = address[2].name;
    },
    selectaAddress() {
      this.iseditor = true;
    },
    submit() {
      if (
        this.address.truename == this.resdata.truename &&
        this.address.address == this.resdata.address &&
        this.address.province == this.resdata.province &&
        this.address.town == this.resdata.town &&
        this.address.district == this.resdata.district
      ) {
        Toast("请先修改内容");
        return;
      }
      if (
        this.address.province != this.resdata.province ||
        this.address.town != this.resdata.town ||
        this.address.district != this.resdata.district
      ) {
        if (this.disabile) {
          Toast("不允许修改省市区");
          return;
        }
      }
      if (!this.address.truename) {
        Toast("请输入真实姓名");
        return;
      } else if (!this.comaddress) {
        Toast("请选择省市区");
        return;
      } else if (!this.address.address) {
        Toast("请输入详细地址");
        return;
      }
      personalUpdate(this.address).then(res => {
        console.log(res);

        Toast(res.message);
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="scss">
.editor-info {
  width: 100%;
  padding-bottom: 48px;
  // .van-switch__node {
  //   width: 50%;
  //   height: 100%;
  //   font-size: 26px;
  // }
  .van-popup {
    width: 100%;
  }
  .tips {
    padding: 10px;
    color: #f71434;
    font-size: 12px;
  }
  .input-box {
    width: 100%;
    .item {
      border-bottom: 1px solid #eee;
      width: 100%;
      height: 45px;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      padding: 0 15px;
      align-items: center;
      input {
        outline: none;
        border: none;
      }
      p {
        width: 100px;
        font-size: 16px;
        font-weight: 450;
        text-align: left;
      }
    }
  }
  .submit {
    width: 100%;
    text-align: center;
    padding: 20px 0;

    input {
      width: 90%;
      height: 40px;
      outline: none;
      border: none;
       background: rgba(241, 22, 51, 1);
      font-size: 16px;
      color: #fff;
      border-radius: 5px;
    }
  }
}
</style>

